<template>
	<view class="mask">
		<view class="upload-box">
			<view class="upload-bg"></view>
			<view class="upload-title fz-40 font-weight-600">发现新版本</view>
			<view class="upload-title fz-30 upload-title-top">V{{versinInfo.name}}</view>
			<view class="upload-info">
				<view style="min-height: 112upx;">
					<text class="text-666978 fz-28 pb-2">{{versinInfo.content}}</text>
				</view>
				<view class="upload-btn btn-small main-bg text-center" @tap="downWgt" v-if="versinInfo.type == 1 && percent === ''">立即更新</view> 
				<view class="d-flex justify-content-between" v-if="versinInfo.type == 2 && percent === ''">
					<view class="upload-btn w-45 btn-wait text-center" @tap="waitDown">稍后再说</view> 
					<view class="upload-btn main-bg w-45 text-center" @tap="downWgt">立即更新</view> 
				</view>
				<template v-if="percent !== ''">
					<view class="upload-status">
						<view class="upload-status-value btn-small" :style="'width:'+ percent + '%'"></view>
					</view>
					<view class="text-999BA8 fz-26">新版本正在更新中，请稍等…</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				percent: '',
				versinInfo: {
				},
			}
		},
		onLoad(options) {
			this.versinInfo = JSON.parse(options.versinInfo)
		},
		onBackPress(options) {
			// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
			if (options.from == 'backbutton') {
				return true;
			} else if (options.from == 'navigateBack') {
				return false;
			}
		},
		methods: {
			//下载资源包
			downWgt() {
				//管理网络文件下载任务
				let task = plus.downloader.createDownload(this.versinInfo.update_link, {}, function(d, status) { //下载到手机的目录
					if (status == 200) {
						//开始安装
						plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, success => {
							//重启APP
							plus.runtime.restart()
							//安装成功,关闭更新弹窗
							this.waitDown()
						}, error => {
							//安装失败,关闭更新弹窗
							this.waitDown()
							uni.showToast({
								title: '安装失败',
								mask: false,
								duration: 1500,
								icon: 'none'
							})
						})
					} else {
						//更新失败,关闭更新弹窗
						this.waitDown()
						uni.showToast({
							title: '更新失败',
							mask: false,
							duration: 1500,
							icon: 'none'
						})
					}
				});
				//监听下载获取百分比
				task.addEventListener("statechanged", (download, status) => {
					switch (download.state) {
						case 1:
							//开始
							break;
						case 2:
							//连接服务器
							break;
						case 3:
							// 已接收到数据,动态计算进度条百分比 totalSize为总量,baifen为当前下载的百分比
							let totalSize = parseInt(download.totalSize); //总量
							let downloadedSize = parseInt(download.downloadedSize); //当前下载量
							let baifen = parseInt(downloadedSize / totalSize * 100);
							//本地存储百分比,首页进度条展示进度
							if (this.percent != baifen) {
								this.percent = baifen
							}
							break;
						case 4:
							// 下载完成
							if (this.versinInfo.type == 1) {
								// plus.runtime.quit();
							} else {
								//隐藏更新弹窗
								// this.waitDown()
							}
							break;
					}
				});
				//执行下载
				task.start();
			},
			waitDown() {
				this.isVerUpdate = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: transparent;
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.content {
		width: 200px;
		height: 200px;
		background-color: #007AFF;
	}

	.text {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		line-height: 200px;
		text-align: center;
		color: #FFFFFF;
	}
	.upload-box {
		width: 610upx;
		border-radius: 24upx;
		position: relative;
		.upload-bg {
			width: 610upx;
			height: 357upx;
			background-image: url(/static/home/update-bg.png);
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;
		}
	
		.upload-title {
			position: absolute;
			font-family: SourceHanSansCN-Bold, SourceHanSansCN;
			color: #292940;
			line-height: 54upx;
			top: 110upx;
			left: 40upx;
		}
	
		.upload-title-top {
			top: 160upx;
			color:#666978;
		}
	
		.upload-info {
			padding: 0 40upx;
			box-sizing: border-box;
			width: 610upx;
			min-height: 310upx;
			border-radius: 0 0 24upx 24upx;
			background: rgba(255, 255, 255, 1);
			padding-bottom: 40upx;
			.text-666978{
				color: #666978;
			}
		}
	
		.upload-btn {
			margin: 43upx auto 0;
			border-radius: 38upx;
			color: #fff;
			font-size: 30upx;
			line-height: 84upx;
			width: 530upx;
			height: 84upx;
			border-radius: 49upx;
		}
		.btn-color{
			background: #292940;
		}
		.upload-status {
			width: 530upx;
			height: 18upx;
			margin: 0 auto;
			margin-top: 63upx;
			margin-bottom: 26upx;
		//	background: linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%);
			
            background: rgba(153,162,169,0.2);
			border-radius: 9upx;
			position: relative;
	
			.upload-status-value {
				position: absolute;
				left: 0;
				height: 18upx;
				border-radius: 9upx;
			}
		}
		.btn-small{
				background: linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%);
		}
		.text-999BA8{
			color: #999BA8;
		}
	}
</style>
